<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账号设置">
            <el-form ref="form" :model="userInfo" :rules="rules" label-width="120px" style="margin-top: 25px">
              <el-form-item label="姓名：" prop="username">
                <el-input disabled style="width: 300px" v-model="userInfo.username"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input style="width: 300px" type="password" v-model="userInfo.password" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveUser">更新</el-button>
                <el-button type="text" @click="$router.back()">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情" lazy>
            <el-row type="flex" justify="end">
              <el-tooltip content="打印个人基本信息">
                <router-link :to="`/employees/print/${userId}?type=personal`">
                  <i class="el-icon-printer" />
                </router-link>
              </el-tooltip>
            </el-row>
            <UserInfo />
          </el-tab-pane>
          <el-tab-pane label="岗位信息" lazy>
            <el-row type="flex" justify="end">
              <el-tooltip content="打印岗位信息">
                <router-link :to="`/employees/print/${userId}?type=job`">
                  <i class="el-icon-printer" />
                </router-link>
              </el-tooltip>
            </el-row>
            <JobInfo />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDetailUserInfo } from '@/api/user';
import { saveUserDetailById } from '@/api/employees';
import UserInfo from './components/UserInfo';
import JobInfo from './components/JobInfo';
export default {
  name: 'EmployeeDetail',
  components: { UserInfo, JobInfo },
  data() {
    return {
      userId: this.$route.params.id,
      userInfo: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入姓名' }],
        password: [
          { required: true, message: '请输入密码' },
          { min: 6, max: 9, message: '密码长度6~9位' },
        ],
      },
    };
  },
  created() {
    getDetailUserInfo(this.userId).then(userInfo => {
      userInfo.password = ''; // 清空密码字段
      this.userInfo = userInfo;
    });
  },
  methods: {
    saveUser() {
      let isSelf = false;
      this.$refs.form
        .validate()
        .then(() => {
          // 在这里先判断当前登录的人 是不是 改的是自己的密码
          // 如果是，给个 修改成功之后 需要重新登录的 确认提示
          // 说明当前登录的人改的是自己的密码
          if (this.userInfo.id === this.$store.state.user.userInfo.base.userId) {
            isSelf = true;
            return this.$confirm('修改完后需要重新登录哦~', '你确定要修改密码吗？', { type: 'warning' });
          }
        })
        .then(() => {
          return saveUserDetailById(this.userInfo);
        })
        .then(() => {
          this.$message.success('更新成功');
          this.userInfo.password = '';
          this.$nextTick().then(() => {
            this.$refs.form.clearValidate('password');
          });

          if (isSelf) {
            this.$store.dispatch('user/logout').then(() => {
              this.$router.push({ name: 'login' });
            });
          }
        });
    },
  },
  // beforeRouteLeave(to, from, next) {
  //   console.log('hehe3333');
  //   // to; // 员工列表页的路由信息对象
  //   // from; // 当前员工详情页的路由信息对象
  //   // to.query = this.$route.query
  //   // console.log(to, from, 'to, from');
  //   to.meta.page = from.query;
  //   next();
  // },
};
</script>
